<template>
    <div class="order-wrapper">
        <div class="top-wrap">
            <p class="title-txt">
                <span>全部项目</span>
            </p>

            <div class="img-wrapper">
                <div class="img-wrap">
                    <img class="ad-img" src="@/assets/images/order_01.png">
                </div>

                <span class="order-status" v-if="item.order_status == 1">待付款</span>
                <span class="order-status" v-if="item.order_status == 2">完成</span>
            </div>
        </div>

        <div class="order-wrap">
            <div class="order-box">

                <div class="item-box" v-for="item1 in item.list" :key="item1.product_id">
                    <div class="box-l">
                        <div class="img-wrap">
                            <img class="ad-img" :src="constant.api_url + item1.product_img">
                        </div>
                    </div>

                    <div class="box-r">
                        <p class="title-01">{{item1.product_title}}</p>

                        <div class="func-box">
                            <p class="price-txt">
                                <span class="icon iconfont icon-fl-renminbi"></span>
                                <span class="num-txt">{{item1.product_price}}</span>元
                            </p>
                        </div>

                        <div class="func-box" v-if="item.order_status == 1">
                            <button class="buy-btn" @touchstart="gopay(item)">去付款</button>
                        </div>

                        <!-- <div class="func-box" v-if="item.order_status == 2">
                            <router-link
                                :to="{ name: '/product/detail', query: {id: item1.product_id} }"
                            >
                                <button class="buy-btn">再次购买</button>
                            </router-link>
                        </div> -->
                    </div>
                </div>

                <!-- <div class="item-box">
          <div class="box-l">
            <div class="img-wrap">
              <img class="ad-img" src="@/assets/images/prdt_01.png">
            </div>
          </div>

          <div class="box-r">
            <p class="title-01">【脸部整形】进口假体+耳软骨鼻尖耳软骨鼻尖耳软骨鼻尖耳软假体...</p>

            <div class="func-box">
              <p class="price-txt">
                <span class="icon iconfont icon-fl-renminbi"></span>
                <span class="num-txt">15800</span>元
              </p>

              <button class="buy-btn">再次购买</button>
            </div>
          </div>
                </div>-->
            </div>

            <div class="info-box">
                <p>
                    <span>订单编号：</span>
                    <span>{{item.order_sn}}</span>
                    <button class="copy-btn">复制</button>
                </p>
                <p>
                    <span>下单时间：</span>
                    <span>{{item.create_time | formatDate}}</span>
                </p>
            </div>
        </div>
        <el-dialog
            title="支付方式"
            :visible.sync="dialogVisible"
        >
            <p style="text-align: center">是否使用优惠券?</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="wxpay">取 消</el-button>
                <el-button type="primary" @click="get_resource">确 定</el-button>
            </span>
        </el-dialog>
        <centerFooter/>
    </div>
</template>

<script type="text/ecmascript-6">
    import centerFooter from "@/views/center/components/centerFooter";
    import constant from "@/utils/constant.js";
    // 引用API文件
    import http from "@/utils/http.js";
    import { formatTime } from "@/utils/index.js";
    import wx from "weixin-jsapi";

    export default {
        name: "orderDetail",
        data() {
            return {
                item: {},
                constant: constant,
                dialogVisible:false,
                orderitem:{}
            };
        },
        components: {
            centerFooter
        },
        filters: {
            formatDate(time) {
                return formatTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
            }
        },
        mounted() {
            let url = window.location.href.split("#")[0];
            http.post(this, {
                url: "pay/wx_config",
                data: {
                    url: url
                },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    if (data.status == 1) {
                        let wdata = data.info;
                        wx.config({
                            appId: wdata.appId, // 必填，公众号的唯一标识
                            timestamp: wdata.timestamp, // 必填，生成签名的时间戳
                            nonceStr: wdata.nonceStr, // 必填，生成签名的随机串
                            signature: wdata.signature, // 必填，签名，见附录1
                            jsApiList: ["chooseWXPay"]
                        });
                    } else {
                        this.$message({
                            message: data.info,
                            type: "error"
                        });
                    }
                }
            });
        },
        methods:{
            pay(item) {
                let that = this;
                http.post(this, {
                    url: "pay/wx_pay",
                    data: {
                        order_id: item.order_id,
                        token: localStorage.getItem("user_token")
                    },
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        if (data.status == 1) {
                            var args = data.info.wdata;
                            wx.ready(function() {
                                console.log(args);
                                wx.chooseWXPay({
                                    timestamp: args.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                    nonceStr: args.nonceStr, // 支付签名随机串，不长于 32 位
                                    package: args.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                    signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                    paySign: args.paySign, // 支付签名
                                    success: function(res) {
                                        console.log(res);
                                        if (res.errMsg === "chooseWXPay:ok") {
                                            window.location.reload();
                                        } else {
                                            that.$message({
                                                message: res.errMsg
                                            });
                                        }
                                    },
                                    cancel: function(res) {
                                        console.log(res);
                                        that.$message({
                                            message: "已取消支付"
                                        });
                                    },
                                    fail: function(res) {
                                        console.log(res);
                                        that.$message({
                                            message: "购买失败，请重新支付",
                                            type: "error"
                                        });
                                    }
                                });
                            });
                        } else {
                            that.$message({
                                message: "购买失败，请重新支付",
                                type: "error"
                            });
                        }
                    }
                });
            },
            gopay(item){
                return false;
                this.orderitem = item;
                this.dialogVisible = true;
            },
            wxpay(){
                this.pay(this.orderitem)
                this.orderitem = {}
                this.dialogVisible = false;
            }
        },
        created() {
            
        },
        activated(){
            let order_id = this.$route.query.order_id;
            http.get(this, {
                url: "order/order_detail",
                data: {
                    order_id: order_id,
                    token: localStorage.getItem("user_token")
                },
                dataType: "json",
                success: function(data) {
                    console.log("订单详情:", data);
                    if (data.status == 1) {
                        this.item = data.info;
                    } else {
                        this.$message.error(data.info);
                    }
                }
            });
        }
    };
</script>

<style scoped lang="scss">
    .order-wrapper {
        .top-wrap {
            .title-txt {
                $letHeight: 0.6rem;
                height: $letHeight;
                line-height: $letHeight;
                text-align: center;
                background-color: $c-gray-dark;

                span {
                    font-size: 0.38rem;
                    color: $c-mainC;
                }
            }

            .img-wrapper {
                $letHeight: 1.65rem;
                height: $letHeight;
                width: 100%;
                position: relative;

                .img-wrap {
                    width: 100%;
                    height: $letHeight;
                    overflow: hidden;
                    position: relative;
                    border-radius: 0rem;

                    .ad-img {
                        // @extend .cmm-translateXY;
                        width: 100%;
                    }
                }

                .order-status {
                    @extend .cmm-translateY;
                    left: 0.48rem;
                    font-size: 0.38rem;
                    font-weight: bold;
                    color: $c-black-light;
                }
            }
        }

        .order-wrap {
            @extend .cmm-border;

            .order-box {
                padding: 0.37rem 0;

                .item-box {
                    padding: 0 0.26rem;
                    @extend .cmm-clearfix;
                    margin-top: 0.25rem;
                    $letHeight: 1.36rem;
                    height: $letHeight;

                    &:first-child {
                        margin-top: 0;
                    }

                    .box-l {
                        width: 1.9rem;
                        float: left;

                        .img-wrap {
                            width: 100%;
                            height: $letHeight;
                            overflow: hidden;
                            position: relative;
                            border-radius: 0.2rem;

                            .ad-img {
                                @extend .cmm-translateXY;
                                width: 100%;
                            }
                        }
                    }

                    .box-r {
                        float: right;
                        width: 5.08rem;
                        padding-left: 0.4rem;

                        .title-01 {
                            font-size: 0.26rem;
                            color: $c-mainC;
                            height: 0.94rem;
                            overflow: hidden;
                            padding: 0.15rem 0;
                        }

                        .func-box {
                            $letHeight: 0.43rem;
                            .price-txt {
                                width: 50%;
                                float: left;
                                text-align: left;
                            }

                            p {
                                width: 50%;
                                float: left;
                                text-align: left;
                                font-size: 0.32rem;
                                color: $c-themeC;
                                line-height: $letHeight;
                            }

                            span {
                                display: inline-block;
                                line-height: $letHeight;
                                float: left;
                            }

                            .icon {
                                font-size: 0.4rem;
                                margin-right: 0rem;
                            }

                            .buy-btn {
                                width: 1.66rem;
                                display: inline-block;
                                float: right;
                                border-radius: 0.8rem;
                                background-color: $c-themeBg;
                                font-size: 0.28rem;
                                font-weight: normal;
                                color: $c-white-light;
                                height: $letHeight;
                                line-height: $letHeight;
                                text-align: center;
                            }
                        }
                    }
                }
            }

            .info-box {
                padding: 0.27rem 0.4rem;
                $letHeight: 0.5rem;
                border-top: 0.02rem solid $c-gray-dark;
                p {
                    font-size: 0.26rem;
                    color: $c-mainC;
                    line-height: $letHeight;
                    width: 100%;

                    span {
                        display: inline-block;
                        line-height: $letHeight;
                        color: inherit;

                        margin-right: 0.2rem;
                    }

                    .copy-btn {
                        width: 1.18rem;
                        height: $letHeight;
                        display: inline-block;
                        margin-left: 0.6rem;
                        border-radius: 0.8rem;
                        border: 0.02rem solid $c-gray-dark;
                        background-color: $c-white-light;
                        font-size: 0.26rem;
                        font-weight: normal;
                        color: inherit;
                        line-height: $letHeight;
                        text-align: center;
                    }
                }
            }
        }
    }
</style>
